<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="提醒配置" name="first">
        <el-card>
          <el-button type="primary" @click="addkf()" size="small">添加配置</el-button>
          <el-button type="primary" @click="sx()" size="small">查询</el-button>
          <el-button type='primary' @click="exportExcel('apiIndex')" size="small" plain>导出</el-button>
          <br>
          <br>
          <el-table :data="tableData.data.pageList" border style="width: 100%" id="apiIndex">
            <el-table-column fixed align="center" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.type == 0" style="font-weight: 800;color: red;">未启用</span>
                <span v-if="scope.row.type == 1" style="font-weight: 800;color: green;">已启用</span>

              </template>
            </el-table-column>
            <el-table-column fixed prop="name" align="center" label="名称">
            </el-table-column>
            <el-table-column fixed prop="userName" align="center" label="账号">
            </el-table-column>

            <el-table-column fixed prop="balance" align="center" label="当前余额">
            </el-table-column>
            <el-table-column fixed prop="balanceMin" align="center" label="余额低于通知">
            </el-table-column>

            <el-table-column fixed prop="setTime" align="center" label="设置间隔时间/h">
            </el-table-column>
            <el-table-column fixed prop="phone" align="center" label="通知手机号">
            </el-table-column>


            <el-table-column fixed prop="dayNum" align="center" label="当日次数">
            </el-table-column>
            <el-table-column fixed prop="monthNum" align="center" label="当月次数">
            </el-table-column>
            <el-table-column fixed prop="allNum" align="center" label="总次数">
            </el-table-column>
            <el-table-column fixed prop="updateTime" align="center" label="上次通知时间">
            </el-table-column>

            <!-- 产品操作0 -->
            <el-table-column label="产品操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="text" plain @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              </template>

            </el-table-column>
            <!-- 产品操作1 -->
          </el-table>
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :page-sizes="[10, 15, 20, 50]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.data.totalCount">
          </el-pagination>

          <!-- 添加弹窗 -->
          <el-dialog title="添加余额提醒配置" :visible.sync="addlog" width="30%">
            <span style="display: block;width: 150px;">请填写以下配置项</span>
            <br>
            <el-input style="width: 140px" size="small" v-model="nameinput" placeholder="用户账号" clearable="">

            </el-input>
            <br>

            <br>
            <span style="display: block;width: 150px;">余额小于x提醒/元</span>
            <br>

            <el-input-number label="描述文字" placeholder="余额小于x提醒/元" v-model="addform.balanceMin" clearable>
            </el-input-number>
            <br>
            <br>
            <span style="display: block;width: 150px;">提醒间隔时间/h</span>
            <br>

            <el-input-number placeholder="提醒间隔时间/h" v-model="addform.setTime" clearable>
            </el-input-number>
            <br>
            <br>
            <span style="display: block;width: 150px;">当日次数/次</span>
            <br>

            <el-input-number placeholder="当日次数/次" v-model="addform.dayNumMax" clearable>
            </el-input-number>

            <span slot="footer" class="dialog-footer">
              <el-button @click="addlog = false">取 消</el-button>
              <el-button type="primary" @click="addkfok()">确 定</el-button>
            </span>
          </el-dialog>
          <!-- 添加弹窗 -->
          <el-dialog title="修改配置" :visible.sync="editlog" width="30%">

            <br>
            <span style="display: block;width: 150px;">当前状态</span>
            <br>
            <el-select v-model="editfrom.type" clearable placeholder="请选择">
              <el-option v-for="item in typeoptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <br>
            <span style="display: block;width: 150px;">余额小于x提醒/元</span>
            <br>

            <el-input-number label="描述文字" placeholder="余额小于x提醒/元" v-model="editfrom.balanceMin" clearable>
            </el-input-number>
            <br>
            <br>
            <span style="display: block;width: 150px;">提醒间隔时间/h</span>
            <br>

            <el-input-number placeholder="提醒间隔时间/h" v-model="editfrom.setTime" clearable>
            </el-input-number>
            <br>
            <br>
            <span style="display: block;width: 150px;">当日次数/次</span>
            <br>

            <el-input-number placeholder="当日次数/次" v-model="editfrom.dayNumMax" clearable>
            </el-input-number>
            <br>
            <span style="display: block;width: 150px;">预警手机号</span>
            <br>

            <el-input type="textarea" :rows="2" placeholder="如加多个请按这格式176*****,178******,182****" v-model="editfrom.phone"
              clearable>
            </el-input>
            <span slot="footer" class="dialog-footer">
              <el-button @click="editlog = false">取 消</el-button>
              <el-button type="primary" @click="editok()">确 定</el-button>
            </span>
          </el-dialog>
          <el-dialog title="删除问题" :visible.sync="deletelog" width="30%">
            <span>您确定删除该问题吗？</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="deletelog = false">取 消</el-button>
              <el-button type="primary" @click="deleteok()">确 定</el-button>
            </span>
          </el-dialog>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="发送记录" name="second">

        <el-card>
          <el-button type="primary" @click="jlcx()" size="small">查询</el-button>
          <br>
          <br>
          <el-table :data="tableDatas.data.pageList" border style="width: 100%" id="apiIndex">

            <el-table-column fixed align="center" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.type != 0" style="font-weight: 800;color: red;">失败</span>
                <span v-if="scope.row.type == 0" style="font-weight: 800;color: green;">成功</span>

              </template>
            </el-table-column>
            <el-table-column fixed prop="sendTime" align="center" label="通知时间">
            </el-table-column>

            <el-table-column fixed prop="userName" align="center" label="账号">
            </el-table-column>

            <el-table-column fixed prop="realBalance" align="center" label="当前余额">
            </el-table-column>
            <el-table-column fixed prop="text" align="center" label="通知文本">
            </el-table-column>


            <el-table-column fixed prop="mobile" align="center" label="通知手机号">
            </el-table-column>

            <el-table-column fixed prop="mark" align="center" label="备注">
            </el-table-column>


          </el-table>
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :page-sizes="[10, 15, 20, 50]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
            :total="tableDatas.data.totalCount">
          </el-pagination>
        </el-card>

      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import { userAcaddUser, userAcupdateUser, userAcselectUser, userAcselectUserLog } from "@/api/user";
import { getUsername } from "@/api/order";

export default {
  data() {
    return {
      fsjl: {
        pageCode: 1,
        pageSize: 10,
        userName: "",
        mobile: "",
        type: ""
      },
      activeName: 'first',
      nameinput: "",
      options: [],
      userName: "",
      dqkf: "",
      addlog: false,
      editlog: false,
      deletelog: false,
      addform: {
        userName: "",
        balanceMin: 0,
        setTime: 12,
        dayNumMax: 1,
      },
      typeoptions: [{
        value: 0,
        label: '禁用'
      }, {
        value: 1,
        label: '启用'
      },],
      editfrom: {
        balanceMin: 10000,
        dayNumMax: 2,
        setTime: 9,
        phone: '123*****,2234******,231****',
        type: 0
      },
      tableData: [],
      tableDatas: [],

      pageCode: 1,
      pageSize: 10,
      deletefaqid: ""
    }
  },
  async created() {
    let username = window.localStorage.getItem("username");
    this.nameinput = username
    this.sx()
    this.jlcx()
  },
  methods: {

    addkf() {
      this.addlog = true
    },

    async sx() {
      let a = {
        pageCode: this.pageCode,
        pageSize: this.pageSize,
      }
      let q = await userAcselectUser(a);
      this.tableData = q;
    },

    async jlcx() {
      let q = await userAcselectUserLog(this.fsjl);
      this.tableDatas = q;
    },






    async addkfok() {

      if (this.addform.dayNumMax < 5) {
        if (this.nameinput) {
          this.addform.userName = this.nameinput
          let a = await userAcaddUser(this.addform);
          this.$message({
            message: a.message,
            type: "success",
          });
          this.addlog = false
        } else {
        }
      } else {
        this.$message({
          message: "不能超过5次",

        });
      }

    },

    async handleEdit(index, row) {

      this.editlog = true;
      this.editfrom.id = row.id

      this.editfrom.balanceMin = row.balanceMin
      this.editfrom.dayNumMax = row.dayNumMax
      this.editfrom.setTime = row.setTime
      this.editfrom.phone = row.phone
      this.editfrom.type = row.type
    },
    async editok() {
      let a = await userAcupdateUser(this.editfrom);
      this.editlog = false;
      this.$message({
        message: a.message,
        type: "success",
      });
      // this.sx();
    },
    async handleDelete(index, row) {
      this.deletelog = true
      this.deletefaqid = row.id
    },
    async deleteok() {
      this.deletelog = false
      let a = await deletefaq({ id: this.deletefaqid });
      this.$message({
        message: a.msg,
        type: "success",
      });
      this.sx();

    },
    // 分页查询
    async handleSizeChange(val) {
      this.pageSize = val;
      this.sx();
    },
    async handleCurrentChange(val) {
      this.pageCode = val;
      this.sx();
    },
  },
};
</script>

